<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <book>
            <div slot="default">插槽01</div>
            <div slot="s1">插槽02</div>
            <!-- <template slot="s2"> -->
            <!-- 在template标签里可以使用v-slot指令，找插槽的名字  -->
            <template v-slot:s2>            
                <div>插槽03-01</div>
                <div>插槽03-02</div>
            </template>

            <!-- 在template里，使用v-slot指令，可以完成作用域插槽（在父组件的模板上使用子组件的数据） -->
            <template v-slot:s3="obj">
                <div>插槽04-01:{{msg}}</div>
                <div>插槽04-02：{{obj.s}}</div>
                <div>插槽04-03：{{obj.age}}</div>
            </template>

            <!-- v-solt:可以简写为# -->
            <template #s4="obj">
                <div>插槽05-01:{{msg}}</div>
                <div>插槽05-02：{{obj.s}}</div>
                <div>插槽05-03：{{obj.age}}</div>
            </template>

        </book>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let book = {
            template: `
                <div>
                    <p>我是上p</p>
                     <slot></slot>
                    <p>我是中p1</p>
                    <slot name="s1"></slot>
                    <p>我是中p2</p>
                    <slot name="s2"></slot>
                    <p>我是中p3</p>
                    <slot name="s3" :s="sex" :age="age" ></slot>
                    <p>我是中p4</p>
                    <slot name="s4" :s="sex" :age="age" ></slot>
                   <p>我是下p</p>
                </div>   
            `,
            mounted(){
                console.log("this.$slots",this.$slots);
            },
            data() {
                return {                    
                    sex: "男",
                    age:12
                }
            }

        }


        new Vue({
            el: "#app",
            components: {
                book
            },
            data:{
                msg:"hello，我是父亲"
            }
        });


    </script>
</body>

</html>